<template>
	<div class="record-plane">
  		<el-table
  			class="mt-20"
			:data="dataList" 
			style="width: 100%"
			v-loading="loading">
		    <el-table-column prop="name" label="姓名"></el-table-column>
		    <el-table-column prop="post" label="职务"></el-table-column>
		    <el-table-column prop="tel" label="电话"></el-table-column>
		    <el-table-column label="操作" width="220">
		    	<template slot-scope="scope">
		    		<el-button :loading="viewing" type="green" @click="viewAction(scope.row)">详情</el-button>
		    	</template>
		    </el-table-column>
		</el-table>
		<el-pagination
			v-if="total>0"
			class="text-right mt-20 mr-20"
	      	@current-change="handleCurrentChange"
	      	:current-page="currentPage"
	      	:page-size="pageSize"
	      	layout="prev, pager, next, total, jumper"
	      	:total="total">
	    </el-pagination>

		<!-- 详情 start -->
		<el-dialog title="详情" :visible.sync="viewModalVisible" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close append-to-body>
			<el-form ref="detail" :model="detail" label-width="100px">
			  	<el-form-item label="账户名：">{{detail.accountname}}</el-form-item>
			  	<el-form-item label="姓名：">{{detail.name}}</el-form-item>
			  	<el-form-item label="职务：">{{detail.post}}</el-form-item>
			  	<el-form-item label="电话：">{{detail.tel}}</el-form-item>
			  	<el-form-item label="手机：">{{detail.phone}}</el-form-item>
			  	<el-form-item label="创建时间：">{{detail.createtime}}</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 详情 end -->
	</div>
</template>
<script>
export default {
	name: 'recordPlan',
	props: {
		id: {
			type: String,
			default: "",
		}
	},
	computed: {},
	watch: {},
	data () {
		return {
			total: 0,
			loading: false,
			currentPage:1,
			pageSize: 10,
			dataList:[],
			viewing: false,
			viewModalVisible: false,
			detail: {}
		}
	},
	methods: {
		getData (page) {
			this.loading = true
			this.$get('/check/firecontrolPerson/firecontrolPersonListPage', {
				page: page,
				limit: this.pageSize,
				businessId: this.id
			}).then(res => {
				this.loading = false
            	let data = res.data
                this.currentPage = page
                this.total = data.totalSize
                this.dataList = data.Items
            }, (err) =>{
            	// 
            })
		},
		viewAction (item) {
			this.viewing = true
			this.$get('/check/firecontrolPerson/firecontrolPersonDetail', {id: item.id}).then(res => {
				this.viewing = false
            	this.detail = res.data
            	this.viewModalVisible = true
            }, (err) =>{
            	// 
            })
		}
	},
	created () {
		this.getData(1)
	}
}
</script>